<script setup lang="ts">
  import { ref } from 'vue'

  const props = defineProps({
    title: {
      type: String,
      default: () => '审核确认通过吗?',
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
  })

  const emits = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
    (e: 'agree', value: string): void
  }>()

  // 弹窗显示状态
  const visible = defineModel('modelValue', { type: Boolean, default: false })

  // 表单
  const form = ref({
    reviewRemark: '',
  })

  /**
   * 关闭弹窗
   */
  const onClose = () => {
    form.value.reviewRemark = ''
    visible.value = false
  }
</script>

<template>
  <!-- 保存并审核弹窗 -->
  <h-dialog v-model="visible" :title="props.title" :loading="props.loading" @close="onClose">
    <el-form class="modal_form_content audit_form" label-position="top">
      <el-form-item label="审核备注">
        <el-input
          v-model.trim="form.reviewRemark"
          maxlength="400"
          placeholder="请填写审核备注"
          type="textarea"
          show-word-limit
          resize="both"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <h-button is-modal type="primary" @click="emits('agree', form.reviewRemark)">通过</h-button>
      <h-button is-modal @click="onClose">取消</h-button>
    </template>
  </h-dialog>
</template>

<style scoped lang="scss">
  .audit_form {
    :deep(.el-form-item) {
      .el-form-item__content {
        .el-textarea {
          .el-textarea__inner {
            width: 100% !important;
            min-height: 75px !important;
            max-height: 215px !important;
          }
        }
      }
    }
  }
</style>
